 <template>
  <div  style="width: 99%;margin: auto">
    <div>
      <el-row :gutter="15">
        <el-col :span="6">
          <el-card shadow="always" style="border-radius: 10px">
            <div style="height: 80px;line-height: 80px">
              <span style="font-size: 20px">
                即将到来的事务
              </span>
              <span style="font-size: 30px;float: right;font-weight: 600;color: #E6A23C">
                {{pageHomeData.aboutCount}}
              </span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always" style="border-radius: 10px">
            <div style="height: 80px;line-height: 80px">
              <span style="font-size: 20px">
                正在进行的事务
              </span>
              <span style="font-size: 30px;float: right;font-weight: 600;color: #67C23A">
                {{pageHomeData.runCount}}
              </span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always" style="border-radius: 10px">
            <div style="height: 80px;line-height: 80px">
              <span style="font-size: 20px">
                已完成的事务
              </span>
              <span style="font-size: 30px;float: right;font-weight: 600;color: #409EFF">
                {{pageHomeData.completeCount}}
              </span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always" style="border-radius: 10px">
            <div style="height: 80px;line-height: 80px">
              <span style="font-size: 20px">
                已逾期的事务
              </span>
              <span style="font-size: 30px;float: right;font-weight: 600;color: #F56C6C">
                {{pageHomeData.overdueCount}}
              </span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 10px">

      <el-row :gutter="15">
        <el-col :span="12">
          <el-card shadow="always" style="border-radius: 10px">
            <div style="font-size: 16px;font-weight: 600">
              当月事务安排
            </div>
            <div style="background-color: #c7c7c7;height: 1px;margin-top: 10px">
            </div>
            <el-table :data="tableDataMonth" stripe  height="600px" size="small" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" :row-class-name="tableRowClassName">
              <el-table-column prop="memoName" label="备忘录名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="startTime" label="开始时间" show-overflow-tooltip></el-table-column>
              <el-table-column prop="endTime" label="结束时间" show-overflow-tooltip></el-table-column>
              <el-table-column prop="feedback" label="完成反馈" show-overflow-tooltip></el-table-column>
              <el-table-column prop="state" label="状态" :formatter="statusFormatter"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" width="80px">
                <template scope="scope">
                  <el-row>
                    <el-col :span="24" v-if="scope.row.status == 0">
                      <el-tooltip effect="dark" content="完成备忘录" placement="top-end">
                        <el-button type="success" icon="el-icon-check" circle size="mini" @click="complete(scope.row)"></el-button>
                      </el-tooltip>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always" style="border-radius: 10px">
            <div style="font-size: 16px;font-weight: 600">
              本周事务安排
            </div>
            <div style="background-color: #c7c7c7;height: 1px;margin-top: 10px">
            </div>
            <el-table :data="tableDataWeek" stripe  height="600px" size="small" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" :row-class-name="tableRowClassName">
              <el-table-column prop="memoName" label="备忘录名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="startTime" label="开始时间" show-overflow-tooltip></el-table-column>
              <el-table-column prop="endTime" label="结束时间" show-overflow-tooltip></el-table-column>
              <el-table-column prop="feedback" label="完成反馈" show-overflow-tooltip></el-table-column>
              <el-table-column prop="state" label="状态" :formatter="statusFormatter"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" width="80px">
                <template scope="scope">
                  <el-row>
                    <el-col :span="24" v-if="scope.row.status == 0">
                      <el-tooltip effect="dark" content="完成备忘录" placement="top-end">
                        <el-button type="success" icon="el-icon-check" circle size="mini" @click="complete(scope.row)"></el-button>
                      </el-tooltip>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-dialog title="逾期提醒" :visible.sync="dialogFormEdit" width="1000px" :close-on-click-modal="false">
      <el-table :data="tableData" stripe  height="80%" size="small" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
        <el-table-column prop="memoName" label="备忘录名称"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
        <el-table-column prop="message" label="逾期提醒"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="90px">
          <template scope="scope">
            <el-row>
              <el-col :span="24">
                <el-tooltip effect="dark" content="完成备忘录" placement="top-end">
                  <el-button type="success" icon="el-icon-check" circle size="mini" @click="complete(scope.row)"></el-button>
                </el-tooltip>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="完成备忘录" :visible.sync="dialogFormComplete" width="800px" :close-on-click-modal="false">
      <el-form :model="completeParams" :rules="completeRules" ref="completeParams" label-width="160px" size="small" style="width:500px">
        <el-form-item label="反馈" prop="feedback">
          <el-input v-model="completeParams.feedback" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" style="margin-top:50px">
        <el-button @click="dialogFormComplete = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="completeSubMit('completeParams')" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data() {
    return {
      tableData:[],
      dialogFormEdit:false,
      dialogFormComplete:false,
      completeParams:{
        id:"",
        feedback:""
      },
      completeRules: {
        feedback: [
          { required: true, message: '请输入反馈', trigger: 'blur' },
        ]
      },
      tableDataMonth:[],
      tableDataWeek:[],
      pageHomeData:{}
    };
  },
  created() {
    this.getPageHome()
    this.list()
    this.listMonth()
    this.listWeek()
  },
  methods:{
    getPageHome() {
      this.axios({
        method: "get",
        url: "/memo-info/home-page",
        params: {
          userId:localStorage.getItem("userId")
        },
      }).then((res) => {
        this.pageHomeData = res.data.data.countMap;

      });
    },
    list() {
      this.axios({
        method: "get",
        url: "/memo-info/remind-list",
        params: {
          userId:localStorage.getItem("userId")
        },
      }).then((res) => {
        this.tableData = res.data.data.list;
        if(this.tableData.length > 0){
          this.dialogFormEdit = true
        }
      });
    },
    completeSubMit(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false
        }else {
          this.axios({
            method: "post",
            url: "/memo-info/complete",
            data: this.completeParams,
          })
              .then((res) => {
                if (res.data.code === 200) {
                  this.dialogFormComplete = false;
                  this.$message({message: "操作成功",type: "success"});
                  this.getPageHome()
                  this.listMonth()
                  this.listWeek()
                } else {
                  this.$message.error(res.data.message);
                }
              });
        }
      })
    },
    complete(row){//编辑弹出层
      this.completeParams.id = row.id;
      this.completeParams.feedback = ""
      this.dialogFormComplete = true;
    },
    listMonth() {
      this.axios({
        method: "get",
        url: "/memo-info/list",
        params: {
          userId:localStorage.getItem("userId"),
          showType:0
        },
      }).then((res) => {
        this.tableDataMonth = res.data.data.list;
      });
    },
    listWeek() {
      this.axios({
        method: "get",
        url: "/memo-info/list",
        params: {
          userId:localStorage.getItem("userId"),
          showType:1
        },
      }).then((res) => {
        this.tableDataWeek = res.data.data.list;
      });
    },
    statusFormatter(row){
      if(row.status == 0){
        return "待完成"
      }else if(row.status == 1){
        return "已完成"
      }else if(row.status == 2){
        return "已逾期"
      }
    },
    tableRowClassName({row}) {
      if (row.status === 0) {
        return 'success-row';
      } else if (row.status === 1) {
        return 'primary-row';
      }else if (row.status === 2) {
        return 'danger-row';
      }
      return '';
    }
  }
};
</script>

<style>
.el-table .primary-row {
  color: #409EFF;
}

.el-table .success-row {
  color: #67C23A;
}

.el-table .danger-row {
  color: #F56C6C;
}
</style>